<style lang="less">
@import "./css/dialog.less";
/*文本溢出出现省略号*/
.text_overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text_center {
  text-align: center;
}
.s_t_search_con,.s_t_btn_con{
  margin: 2vh 0;
}
</style>
<template>
  <div id="dialog_main" v-if="show" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index:99;" :style="{'z-index':zIndex||99}">
    <div class="my_dialog">
      <div class="dialog_main" :class="exClass" :style="dialogPosition">
        <div class="title normal_chart_title" v-if="title" >
          <span >{{title}}</span>
          <div class="closeBtn" v-if="btnPosition=='top'" @click="closeDialog">x</div>
        </div>
        <div class="closeBtn close_btn_bottom" v-if="btnPosition=='bottom'" @click="closeDialog"></div>
        <div class="normal_chart_close_btn"  @click="closeDialog"></div>
        <div v-if="type=='table'" class="content">
          <com-table :url="tableData.url" :params="tableData.params" :columns="tableData.columns"  :isBorder="tableData.isBorder" :isStripe="tableData.isStripe" :datas="tableData.datas"></com-table>
          <!-- <avue-crud :option="option" :data="data" :page="page" @on-load="onLoad" @row-click="handleRowClick"></avue-crud> -->
          <!-- <el-pagination layout="prev, pager, next" :total="1000"> </el-pagination> -->
        </div>
        <com-mulcolumn-table v-else-if="type=='multiTable'" :data="tableData.data" :labelAlign="tableData.labelAlign" :tableClass="tableData.tableClass" :columns="tableData.columns" :labelWidth="tableData.labelWidth" :tdClass="tableData.tdClass" :borderColor="tableData.borderColor"></com-mulcolumn-table>
      
        <div v-else-if="type=='pdf'" class="pdf_con">
          <com-pdf-viewer :fileSrc="src" ></com-pdf-viewer>
        </div>
          <div v-else-if="type=='phbdialog'" class="phbdialog"><com-tx-zbtx :data="txDatas" :barDatas="barDatas"></com-tx-zbtx></div>
           <div v-else-if="type=='bmrw'"><com-bmrwTk :data="barDatas"></com-bmrwTk></div>
      </div>
    </div>
  </div>
</template>
<script>
import MyTable from './myTable.vue';
import txZbtx from './txZbtx';
import bmrwTk from './bmrwTk'
export default {
  components:{
    'com-table': MyTable,
    'com-tx-zbtx':txZbtx,
    'com-bmrwTk':bmrwTk
  },
  name: "myDialog",
  props: {
    show: Boolean,
    type: String,
    mainClass: {
      type:Array|String,
      default(){
        return [];
      }
    },
    bmrwData:Array,
    barDatas:Array,
    txDatas:Array,
    title: String,
    areaData: Array,
    tableData: Object,
    src: String,
    remoteData: Object,
    position:{
      type: String,
      default:'center'
    },
    chartData: Object,
    btnPosition:{
      type: String,
      default: 'top'
    },
    detailData: Object,
    personalInformation: Object,
    zpData: Object,
    mapDatas: Object,
    zIndex: Number
  },
  data() {
    return {
      page: { //分页配置
        total: 40, 
        pageSize: 1, 
        pageSizes: [1,2,3], 
        background: true 
      },
      data: [
        {
          id: "1",
          name: "张三",
          zpjjs: 14,
          grade: 1,
          phone1: "17547400800",
          phone: "17547400800",
          icon: "el-icon-time",
          test: 1,
          sex: "男",
        },
        {
          id: "4",
          name: "王五",
          zpjjs: 10,
          grade: 1,
          test: 1,
          sex: "女",
          icon: "el-icon-star-on",
          phone1: "17547400800",
          phone: "17547400800"
        }
      ],
      areaActiveIndex: -1,
      zpForm: {
        dcljj: 0,
        fzr: "",
        zpjjs: 0,
        date1:'2020-10-14',
        date2:'20020-10-16'
      },
      fzrSelections:[
        { name:'李东明',num:7},
        { name:'万国强',num:5},
        { name:'刘璐',  num:3}
      ],
      validateRules:{
        zpjjs:[
            { required: true, message: '年龄不能为空' },
            { type: 'number', message: '年龄必须为数字值' },
          ]
      },
      tableSelections:[],//表格选中数据
    };
  },
  computed:{
    dialogClass(){
      switch(this.type){
        case "table": return [''];break;
        case "syyjhyTable": return [''];break;
        case "pdf": return ['big'];break;
        case "area": return ['small'];break;
        case "remote": return ['remote'];break;
        case "remoteTable": return ['remote','remote_table'];break;
        case "mapWarningInfo": return ['map_warning_info'];break;
        case "normalChart": return ['normal_chart_box'];break;
        default:return [''];break;
      }
    },
    dialogPosition(){
      switch(this.position){
        case "left": 
          return {
            left:'66px',
            right:'auto',
            top:'0',
            bottom:'0',
            margin:'auto'
          };break;
        case "right": 
          return {
            right:'66px',
            left:'auto',
            top:'0',
            bottom:'0',
            margin:'auto'
          };break;
        case "top": 
          return {
            left:'0',
            right:'0',
            bottom:'auto',
            top:'66px',
            margin:'auto'
          };break;
        case "bottom": 
          return {
            left:'0',
            right:'0',
            top:'auto',
            bottom:'66px',
            margin:'auto'
          };break;
        default:
          return {
            left:'0',
            right:'0',
            bottom:'0',
            top:'0',
            margin:'auto'
          };break;
      }
    },
    exClass(){
      return this.dialogClass.concat(this.mainClass)
    },
    jnText(){
      return this.zpData.jnType=='1'?'急':'难';
    }
  },
  watch:{
    tableSelections:{
      handler(val){
        this.zpForm.zpjjs = val.length;
      },
      deep:true
    },
    zpForm:{
      handler(val){
        if(val.fzr){
          this.zpForm.dcljj = this.fzrSelections.filter(item=>item.name==val.fzr)[0].num;
        }else{
          this.zpForm.dcljj = 0;
        }
        
      },
      deep: true
    }
  },
  methods: {
    onLoad(page) {
      //模拟分页
      this.page.total = 2;
    },
    handleRowClick(row, event, column){//row行数据
      console.log(row)
    },
    closeDialog(){
      this.$emit('closeDialog',false)
    },
    changeSelectedArea(i){
      this.areaActiveIndex = i;
    },
    submitSelectedArea(){
      if(this.areaActiveIndex>-1){
        this.$emit('changeSelectedArea',this.areaData[this.areaActiveIndex].value)
        this.$emit('closeDialog',false)
      }else{
        alert('请选择社区！')
      }
    },
    onTableSelect(){
      console.log(this.tableSelections)
      this.$alert('指派成功', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$emit('closeDialog',false)
          }
        });
      
    },
    onTableCancle(){
      this.$emit('closeDialog',false)
    }
  },
  created() {
    // console.log(this.tableData)
  },
  mounted(){
    this.EventBus.$on('handleTableSelect',selections=>{
      this.tableSelections = selections;
    })
  }
};
</script>
